import React, { useCallback, useRef } from 'react'
import Event from '@y.dsh/event'

interface Props {
  data?: { id: string, text: string }
}

function Item(props: Props): React.ReactElement {
  const {
    data
  } = props;

  const content = useRef<HTMLDivElement | null>(null)
  const action = useRef<HTMLDivElement | null>(null)

  // const init = useRef({ content: 0, action: 0, initial: false });
  const handleSwipeLeft = useCallback(() => {
    // e, distance
    // console.log('左滑', distance)
    // if (content.current && action.current) {
    //   if (init.current.initial === false) {
    //     init.current.initial = true;
    //     init.current.content = parseFloat(window.getComputedStyle(content.current).left);
    //     init.current.action = parseFloat(window.getComputedStyle(action.current).right);
    //   }
    //   content.current.style.left = `${init.current.content - distance}px`;
    //   action.current.style.right = `${init.current.action + distance}px`;
    // }
  }, []);

  if (data) {
    return (
      <Event
        // preventDefault
        onSwipeLeft={handleSwipeLeft}
      >
        <li>
          <div ref={content} className="content">{data.text}</div>
          <div ref={action} className="action">删除</div>
        </li>
      </Event>
    )
  }
  return <></>
}

export default Item
